<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style_dark.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html,
			body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				border: none;
				overflow: hidden;
				font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
				font-size: 16px;
				background: #414B57;
			}
			
			/**
			 * 不显示甘特图底部按钮
			 */
			.fn-gantt .bottom {
				/*display: none;*/
			}
		</style>
	</head>

	<body style="height: 100%;width: 100%;">
		<div class="gantt_ot" style="width:1000px; margin:100px auto;">
			<div class="gantt"></div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			var demoSource = [{
				name: "冲刺 0",
				desc: "分析",
				values: [{
					from: '2018-02-10',
					to: '2018-03-03',
					label: "需求收集1",
					customClass: "ganttRed",
					dataObj: {
						desc:'需求收集1',
						from:'2018-02-10',
						to:'2018-03-03'
					}
				},{
					from: '2018-05-10',
					to: '2018-05-23',
					label: "需求收集2",
					customClass: "ganttRed",
					dataObj: {
						desc:'需求收集2',
						from:'2018-05-10',
						to:'2018-05-23'
					}
				}]
			}, {
				desc: "调研",
				values: [{
					from: '2018-02-20',
					to: '2018-03-10',
					label: "调研",
					customClass: "ganttRed"
				}]
			}, {
				name: "冲刺 1",
				desc: "开发",
				values: [{
					from: '2018-03-10',
					to: '2018-05-20',
					label: "开发",
					customClass: "ganttGreen"
				}]
			}, {
				name: " ",
				desc: "展示",
				values: [{
					from: '2018-05-22',
					to: '2018-05-30',
					label: "展示",
					customClass: "ganttBlue"
				}]
			}, {
				name: "冲刺 2",
				desc: "开发",
				values: [{
					from: '2018-06-01',
					to: '2018-07-20',
					label: "开发",
					customClass: "ganttGreen"
				}]
			}, {
				desc: "展示",
				values: [{
					from: '2018-07-20',
					to: '2018-07-25',
					label: "展示",
					customClass: "ganttBlue"
				}]
			}, {
				name: "发布阶段",
				desc: "培训",
				values: [{
					from: '2018-07-26',
					to: '2018-07-30',
					label: "培训",
					customClass: "ganttOrange"
				}]
			}, {
				desc: "部署",
				values: [{
					from: '2018-08-01',
					to: '2018-08-10',
					label: "部署",
					customClass: "ganttOrange"
				}]
			}, {
				desc: "保修期",
				values: [{
					from: '2018-08-10',
					to: '2018-10-10',
					label: "保修期",
					customClass: "ganttOrange"
				}]
			}];
			/*$.ajax({
				url: "data/ganttData.json", //请求后台，并返回甘特图需要的json数据
				type: "post",
				dataType: "json",
				cache: false, //关闭AJAX缓存
				data: {
					"id": 1
				}, //传入的查询参数
				success: function(data) {

					//初始化gantt
					$(".gantt").gantt({
						source: data,
						navigate: 'scroll', //// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
						scale: "weeks", // 这里是设置默认比例。这里总共有四个参数：months  weeks days  hours.
						maxScale: "months", // 这里是设置最大比例。这里总共有四个参数：months  weeks days  hours.
						minScale: "days", // 这里是设置最小比例。这里总共有四个参数：months  weeks days  hours.
						itemsPerPage: 20, //设置甘特图每页显示多少条
						onItemClick: function(data) { //有数据范围内的点击事件
							// alert("Item clicked - show some details");
						},
						onAddClick: function(dt, rowId) { //无数据范围内的点击事件
							// alert("Empty space clicked - add an item!");
						},
						onRender: function() { //渲染事件
							if(window.console && typeof console.log === "function") {
								// console.log("chart rendered");
							}
						}
					});
				}
			});*/

			//初始化gantt
			$(".gantt").gantt({
				source: demoSource,
				navigate: 'scroll', //// 底部使用拖拽的刻度尺还是按钮：scroll和buttons
				scale: "days", // 这里是设置默认比例。这里总共有四个参数：months  weeks days  hours.
				maxScale: "months", // 这里是设置最大比例。这里总共有四个参数：months  weeks days  hours.
				minScale: "days", // 这里是设置最小比例。这里总共有四个参数：months  weeks days  hours.
				itemsPerPage: 20, //设置甘特图每页显示多少条
				onItemClick: function(data) { //有数据范围内的点击事件
					 //alert("Item clicked - show some details");
					 console.log(data);
					 alert(data.desc+":</br>"+data.from + "~" +data.to);
				},
				onAddClick: function(dt, rowId) { //无数据范围内的点击事件
					// alert("Empty space clicked - add an item!");
				},
				onRender: function() { //渲染事件
					if(window.console && typeof console.log === "function") {
						 console.log("chart rendered");
					}
				}
			});

			//弹窗功能
			/*$(".gantt").popover({
				selector: ".bar",
				title: "I'm a popover",
				content: "And I'm the content of said popover.",
				trigger: "hover",
				placement: "auto right"
			});*/

			//prettyPrint();
		});
	</script>

</html>